<template>
    <a-form :form="form" style="height: 100%;">
        <a-row>
            <a-col :span="24">
                <div class="table-operator">
                    <a-button @click="addRow">{{$ti18('rxList.newBtn', '添加')}}</a-button>
                    <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                    <a-button @click="upRow">{{i18n('list.MoveUp','上移')}}</a-button>
                    <a-button @click="downRow">{{i18n('list.MoveDown','下移')}}</a-button>

                    {{i18n('form.separator','值分隔符')}}: <a-input :placeholder="i18n('form.separator','值分隔符')" style="width: 80px" v-model="separator"></a-input>

                </div>
                <rx-grid ref="table"
                         :dataSource="fields"
                         :columns="columns"
                         :allowRowSelect="true"
                         :multiSelect="true"
                         :showPage="false"
                         style="height:300px;">
          <span slot="code" slot-scope="{text,record,index,blur}">
              <a-input v-model="record.code" @blur="blur(index,'code',text,record)" />
          </span>
                    <span slot="name" slot-scope="{text,record,index,blur}">
            <a-input v-model="record.name" @blur="blur(index,'name',text,record)" />
          </span>
                    <span slot="bgcolor" slot-scope="{text,record}">
            <a-input class="be_colour" type="color" v-model="record.bgcolor" />
          </span>
                    <span slot="fgcolor" slot-scope="{text,record}">
            <a-input class="be_colour" type="color" v-model="record.fgcolor" />
          </span>
                </rx-grid>
            </a-col>
        </a-row>
    </a-form>
</template>

<script>
import {RxGrid} from "@lowcode/jpaas-common-lib";
export default {
    name: "renderConfig_display_items",
    props:["layerid","destroy"],
    components:{
        RxGrid
    },
    data(){
        return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            labelCol1: { span:3 },
            wrapperCol1: { span:19 },
            form: this.$form.createForm(this),
            mdl:{},
            fields:[],
            separator:"",
            columns:[{title:this.$ti18('rxList.index', '序号'),width:20,dataIndex: 'index',type:'indexColumn',scopedSlots: {customRender: 'index'}},
                {title:this.i18n('form.labelKey','标签键'),width:50,dataIndex: 'code',allowCellEdit:true,scopedSlots: {customRender: 'code'}},
                {title:this.i18n('form.tagName','标签名'),width:50,dataIndex: 'name',allowCellEdit:true,scopedSlots: {customRender: 'name'}},
                {title:this.i18n('form.backgroundColor','背景颜色'),width:50,dataIndex: 'bgcolor',scopedSlots: {customRender: 'bgcolor'}},
                {title:this.i18n('form.fontColor','字体颜色'),width:50,dataIndex: 'fgcolor',scopedSlots: {customRender: 'fgcolor'}}]
        }
    },
    computed:{
        table(){
            return this.$refs.table;
        },
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        setData(data,fieldDts){
            if(data && data.colorConfigs){
                this.fields=data.colorConfigs;

            }
            this.separator=data.separator || ",";
            this.mdl=data;
            this.form.setFieldsValue(this.mdl);
        },
        validate(callback){
            var self=this;
            this.form.validateFields((err, values) => {
                if(err){
                    return;
                }
                self.mdl=values;
                callback();
            });
        },
        getData(){
            this.mdl.colorConfigs=this.table.getData();
            this.mdl.separator=this.separator;
            return this.mdl;
        },
        changeData(e,field){
            this.mdl[field]=e.target.checked;
        },
        addRow(){
            this.table.addRow({});
        },
        removeRow(){
            this.table.removeRows();
        },
        upRow(){
            this.table.moveUp();
        },
        downRow(){
            this.table.moveDown();
        }
    }
}
</script>

<style scoped>

</style>